import React, { useEffect, useState } from 'react'
import { BottomNavigation, BottomNavigationAction } from '@material-ui/core'
import fastIcon from '@/assets/images/tabbar/fast.png'
import homeActive from '@/assets/images/tabbar/home_1.png'
import home from '@/assets/images/tabbar/home_2.png'
import user from '@/assets/images/tabbar/my_2.png'
import userActive from '@/assets/images/tabbar/my_1.png'
import './ftabbar.less'
import {useHistory} from 'react-router-dom'

export default function FTabBar(props) {
  const [value, setValue] = useState(0)
  const history = useHistory()
  const pathes = ['/home','/fast','/user']
  const handleChange = (ev,val) => { 
    setValue(val)
    history.push(pathes[val])
  }
  const [showTab,setShowTab] = useState(true)
  // eslint-disable-next-line
  useEffect(()=>{
    setShowTab(pathes.includes(history.location.pathname))
  })
  
  return (
    <div className="bottom-tab-bar" style={{display: showTab ? 'block':'none'}}>
      <BottomNavigation value={value} onChange={handleChange} >
        <BottomNavigationAction showLabel label="首页" value={0} icon={<img alt="" src={ value === 0 ? homeActive : home} />} />
        <BottomNavigationAction showLabel label="快速刷题" value={1} icon={<img alt="" src={fastIcon} />} />
        <BottomNavigationAction showLabel label="我的" value={2} icon={<img alt="" src={ value === 2 ? userActive : user} />} />
      </BottomNavigation>
    </div>
  )
}
